<template>
	<view class="log-box flex-center w100">
		<template v-if="logInfo.list.length>0">
			<view class="log-item" v-for="(item,index) in logInfo.list" :key="item.id">
				<view class="log-head w100">
					<image src="/static/group/myTeam_icon.png" mode=""></image>
					<text class="name">{{item.title}}</text>
				</view>
				<view class="log-footer w100">
					<text class="time">核销时间：{{item.create_time_text}}</text>
					<view class="option-box flex-center" @click="toTeam(item.team)">
						<text class="text">详情</text>
						<up-icon name="arrow-right" color="#7EDE9E" size="24rpx"></up-icon>
					</view>
				</view>
			</view>
			<view class="view-more" @click="getMoreGroup">
				<up-loadmore :status="logInfo.status" />
			</view>
		</template>
		<view class="not-list-view" v-else>
			<text class="text">暂无核销记录~</text>
		</view>
	</view>
</template>

<script setup>
	const logInfo = reactive({
		list: [],
		status: 'loadmore',
		page: 1
	});
	onLoad(() => {
		getLogList();
	})
	onReachBottom(() => {
		getMoreGroup();
	})
	const getMoreGroup = () => {
		if (logInfo.status == 'loading' || logInfo.status == 'nomore') return;
		logInfo.status = 'loading';
		setTimeout(() => {
			getLogList();
		}, 300)
	};
	const getLogList = async () => { //获取核销记录
		const res = await $Api.group.writeOffLog({
			page: logInfo.page,
		}, true);
		if (res.code == 1) {

			if (res.data.list && res.data.list.length > 0) {
				let arr = []
				arr = res.data.list
				logInfo.list = [...logInfo.list, ...arr, ];
			}
			if (res.data.totalPage && res.data.totalPage > logInfo.page) {
				logInfo.status = 'loadmore';
				logInfo.page++;
			} else {
				logInfo.status = 'nomore';
			}
		} else {
			uni.hideLoading();
			uni.$u.toast(res.msg)
		}
	}
	const toTeam = (id) => {
		uni.navigateTo({
			url: '/page_main/views/teamDetails?id=' + id
		})
	}
</script>

<style lang="scss" scoped>
	.log-box {
		flex-direction: column;
	}

	.log-item {
		width: 680rpx;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		background-color: #222528;

		.log-head {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			image {
				width: 52rpx;
				height: 52rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.name {
				font-size: 30rpx;
				font-weight: 500;
				color: $name-color;
			}
		}

		.log-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: $description-color;
			}

			.option-box {
				.text {
					font-size: 24rpx;
					font-weight: 400;
					color: #7EDE9E;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>